<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="/css/base.css" rel="stylesheet" type="text/css" />
    <link href="/css/validation.css" rel="stylesheet" type="text/css" />
    <title>绑定学号 - 紫荆之声</title>
</head>
<body>
<div id="wrap">
    <header></header>

    <div class="theme" id="theme"></div>

    <hr/>
    <div id="mainbody"></div>

</div>
<footer id="footer">
    <hr />
    <a href="http://www.xuetangx.com/" target="_blank">学堂在线</a>
    <a href="http://www.tsinghua.edu.cn/" target="_blank">清华大学</a>
    <a href="https://github.com/ThssSE" target="_blank">软件工程</a><br>
    &copy; 2016
</footer>

<script type="text/template" id="tpl-header">
    <img class="header-img" src="/img/logo.jpg" />
</script>

<script type="text/template" id="tpl-theme">
    用户认证
</script>

<script type="text/template" id="tpl-mainbody">
    {% if isLoading %}
    <div id="successHolder">
        <img src="/img/loading.gif" />
    </div>
    {% elif isValidated %}
    <div id="successHolder">
        <img src="/img/success.png" />
        <p>认证成功！</p>
        <p>您已经可以使用“紫荆之声”的全部功能了！</p>
    </div>
    {% else %}
    <div id="validationHolder">
        <form class="form-horizontal" role="form" method="post" id="validationForm" onsubmit="return false;">
          <div class="form-group" id="usernameGroup">
            <label for="inputUsername" class="col-xs-3 control-label">学号</label>
            <div class="col-xs-9">
              <input type="tel" class="form-control" id="inputUsername" placeholder="请输入您的学号" name="student_id" onblur="checkUsername();">
              <span class="help-block" id="helpUsername"></span>
            </div>
          </div>
          <div class="form-group" id="passwordGroup">
            <label for="inputPassword" class="col-xs-3 control-label">密码</label>
            <div class="col-xs-9">
              <input type="password" class="form-control" id="inputPassword" placeholder="使用info密码进行登录" name="password" onblur="checkPassword();">
              <span class="help-block" id="helpPassword"></span>
            </div>
          </div>
          <div class="form-group" id="submitGroup">
            <div class="col-xs-offset-3 col-xs-9">
              <button onclick="submitBind();" class="btn btn-default" id="submitBtn">认证</button>
              <p class="help-block" id="helpLoading" style="display: none"><img src="/img/loading.gif">正在认证，请稍候...</p>
              <p class="help-block" id="helpSubmit"></p>
            </div>
          </div>
        </form>
    </div>
    {% endif %}
</script>

<script src="/3rd/jquery.js"></script>
<script src="/3rd/swig.js"></script>
<script src="/js/weixin_lib.js"></script>
<script src="/js/base.js"></script>
<script src="/js/validation.js"></script>

<script>
    var locals = {
        isLoading: true,
        isValidated: false,
        isBinding: false
    };
    var render = function () {
        $('header').html(swig.render($('#tpl-header').html(), {locals: locals}));
        $('#theme').html(swig.render($('#tpl-theme').html(), {locals: locals}));
        $('#mainbody').html(swig.render($('#tpl-mainbody').html(), {locals: locals}));
    };
    $(function () {
        render();
        api.get('/api/u/user/bind', {openid: urlParam.openid}, function (data) {
            locals.isLoading = false;
            locals.isValidated = !!data;
            render();
        }, dftFail);
    });
    var submitBind = function () {
        //locals.isBinding = true;
        //render();
        submitValidation(urlParam.openid, function (data) {
            locals.isBinding = false;
            locals.isValidated = true;
            render();
        }, function (errno, errmsg) {
            //locals.isBinding = false;
            //locals.isValidated = false;
            //render();
            if (errno == 3) {
                showError('usernameGroup', 'helpUsername', '');
                showError('passwordGroup', 'helpPassword', '学号或密码错误！请输入登录info的学号和密码');
            } else {
                showError('submitGroup', 'helpSubmit', '出现了奇怪的错误，我们已经记录下来了，请稍后重试。');
            }
            disableAll(false);
            showLoading(false);
        });
    };
</script>
</body>
</html>
